# JavaScript For Loop

« Previous
Next Chapter »

Loops can execute a block of code a number of times.

## JavaScript Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Often this is the case when working with arrays:

## Instead of writing:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

## You can write:

for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Try it Yourself »

## Different Kinds of Loops

JavaScript supports different kinds of loops:

- for - loops through a block of code a number of times
- for/in - loops through the properties of an object
- while - loops through a block of code while a specified condition is true
- do/while - also loops through a block of code while a specified condition is true

## The For Loop

The for loop is often the tool you will use when you want to create a loop.

The for loop has the following syntax:

for (statement 1; statement 2; statement 3) {
code block to be executed
}

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).

Statement 3 is executed each time after the loop (the code block) has been executed.

## Example

for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Try it Yourself »

From the example above, you can read:

Statement 1 sets a variable before the loop starts (var i = 0).

Statement 2 defines the condition for the loop to run (i must be less than 5).

Statement 3 increases a value (i++) each time the code block in the loop has been executed.

## Statement 1

Normally you will use statement 1 to initiate the variable used in the loop (var i = 0).

This is not always the case, JavaScript doesn't care. Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma):

## Example:

for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Try it Yourself »

And you can omit statement 1 (like when your values are set before the loop starts):

## Example:

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Try it Yourself »

## Statement 2

Often statement 2 is used to evaluate the condition of the initial variable.

This is not always the case, JavaScript doesn't care. Statement 2 is also optional.

If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

| If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial.

## Statement 3

Often statement 3 increases the initial variable.

This is not always the case, JavaScript doesn't care, and statement 3 is optional.

Statement 3 can do anything like negative increment (i--), or larger increment (i = i + 15), or anything else.

Statement 3 can also be omitted (like when you increment your values inside the loop):

## Example:

var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Try it Yourself »

## The For/In Loop

The JavaScript for/in statement loops through the properties of an object:

## Example

var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}
Try it Yourself »

## The While Loop

The while loop and the do/while loop will be explained in the next chapter.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples